<template>
	<view class="contain">
		<view class="pageBtn" @click="goSend">
			<image src="https://yjy.monkeysoftware.cn/serviceplatform/static/images/feature/sendButton.png" mode="aspectFill"></image>
		</view>
		<!-- <view class="showBtn" :class="{'showBtn1': click == 1}" @click="newSend"> 
		 <view class="newBtn" :class="{'newBtn1': click == 1}" >
			<view class="newLine1"></view>
			<view class="newLine2"></view>
		 </view>
		</view> -->
		<view class="nav">
			<view class="navName" :class="{'activeNav': isChange == index}" v-for="(item,index) in serviceMsg" :key='index' @click="changeNav(index,item.Id)">
				{{item.Name}}
				<!-- <image class="navBgIcon" mode="widthFix" v-if="isChange==index" src="../../static/images/navBgIcon.png"></image> -->
			</view>
		</view>
		<view class="line"></view>
		
		<view class="evaContent">
			<view class="evaItem" v-for="(item,index) in evaList" :key='item.Id' @click="toDetail(item)">
				<image v-if="item.AppreciationImgList" class="showImg" :src="item.AppreciationImgList[0]"></image>
				<image v-else class="showImg" :src="item.CoverImg"></image>
				<view class="evaTitle">{{item.Title}}</view>
				<view class="evaUserInfo">
					<view class="infoLeft">
						<image v-if="item.WxUserHeadImg" :src="item.WxUserHeadImg" ></image>
						<image v-else :src="item.CoverImg" ></image>
						<text class="texthide">{{item.WxUserName || '--'}}</text>
					</view>
					<view class="infoRight">
						<view class="Upvote-num">
							<image src="../../static/images/GiveLike1.png" mode="widthFix"></image>
							{{item.UpvoteCount}}
						</view>
						<view>
							<image src="../../static/images/yellowHeart.png" mode="widthFix"></image>
							{{item.CollectionCount}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出框 -->
		<wyb-popup ref="popup" type="center" radius="6" height="800" width="600" :showCloseIcon="false">
		    <view class="popup-content">
		        <view class="miniProgramMsg">
					<view class="topTitle">
						<view class="miniTitle">识花草</view>
						<view class="miniMsg">景区内绿植花卉丰富，拿出手机随手拍，识花君为您识花辨草，带你一起涨知识！长按图片识别小程序。</view>
						<view class="miniImg">
							<!-- <image src="../../static/static/shihuacao.png" mode=""></image> -->
						</view>
						<view class="miniNotic">
							长按二维码识别小程序
						</view>
					</view>
					<view class="bottomTitle" @click="cancelPopup()">取 消</view>
				</view>
		    </view>
		</wyb-popup>
	</view>
</template>

<script>
	var amapFile = require('../../utils/amap-wx.130.js')
	import { getHomeMsg,getChildren } from '@/api/homePage.js'
	import { getGuideSiteList } from '@/api/base.js'
	import Config from '@/config/index.js'
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
	export default{
		props:{
			wybPopup
		},
		data(){
			return{
				click:0,
				BannerList:[],
				index:1,
				size:10,
				checkId:'',
				evaList:[],
				isChange:0,
				//模块数据
				serviceMsg:[],
				// 日期
				locationDate:'',
				weather:'',
				
			}
		},
		onLoad() {
			// 获取当前日期
			var date=new Date();
			var month=date.getMonth()+1;
			var day=date.getDate();
			this.locationDate=month+'月'+day+'日';
			this.weather=uni.getStorageSync('weather');
			this.getService();
		},
		onShow(options) {
			 try {
				const value = uni.getStorageSync('pageId');
				//console.log("productList->index-t.vue->onShow()->value:",value)
				if (value) {
					if(value==190){
						this.checkId=value
						this.isChange = 0
					}
					if(value==207){
						this.checkId=value
						this.isChange = 1
					}
					if(value==208){
						this.checkId=value
						this.isChange = 2
					}
					if(value==209){
						this.checkId=value
						this.isChange = 3
					}
					if(value==210){
						this.checkId=value
						this.isChange = 4
					}
				}
				else
				{
					//默认选中第一个
					this.checkId=190
					this.isChange = 0
				}
				this.getList()
			}
			catch(e){
				console.log("productList->index-t.vue->onShow():",e.message)
			}
		},
		onHide() {
			uni.removeStorageSync('pageId');
		},
		methods:{
			newSend(){
				if(this.click==1){
					this.click=0
				}else if(this.click==0){
					this.click=1
				}
				
			},
			changeNav(index,id){
				if(index != this.isChange){
					this.isChange = index
					this.checkId = id
					this.getList()
				}
				else{}
			},
			async getList(){
				try{
					uni.showLoading({
						title:'加载中...'
					})
					const { Data } = await getChildren({
						ArticleCategoryId: this.checkId,
						Index: this.index,
						Size: this.size,
					});
					this.evaList = Data
					uni.hideLoading()
				}
				catch(e){}
			},
			async getEvaListDefault(){
				try{
					const { Data } = await getChildren({
						ArticleCategoryId: this.serviceMsg[0].Id,
						Index: this.index,
						Size: this.size,
					});
					this.evaList = Data
				}
				catch(e){}
			},
			goSend(){
				uni.navigateTo({
					url:'/usercenter_subpages/EvaluationForum/addForum'
				})
			},
			toDetail(item){
				uni.navigateTo({
					url:`/usercenter_subpages/EvaluationForum/forumDetail?forumMsg=${JSON.stringify(item)}`
				})
			},
			async getService(){
				try{
					uni.showLoading();
					const {Data}=await getHomeMsg({
						ParentId: Config.site.EvaId,
						layers:2,
					})
				    const bannerData = Data.find(item=>item.Id === Config.site.pingjianBanner)
					const navData = Data.find(item=>item.Id === Config.site.pingjianNav)
					this.serviceMsg=navData.Children;
					this.BannerList=bannerData.Children;
					this.getEvaListDefault()
					uni.hideLoading();
				}
				catch(e){}
			},
			
			
			navTo(e,id){
				if(e==null||e==''){
					uni.navigateTo({
						url:`/usercenter_subpages/detail/touristDetail?id=${id}`
					})
					return;
				}
				// 需要小程序的 用弹出框
				if(e.includes('miniprogram')){
					this.$refs.popup.show();
					return;
				};
				// 跳转其他页面
				if(e.includes('/pages/mall/index')||e.includes('/pages/index/index')){
					uni.switchTab({
						url:e
					})
					return;
				};
				if(e.includes('pages/')&&e.includes('?')){
					uni.navigateTo({
						url:e
					})
					return;
				};
				if(e.includes('pages/')){
					uni.navigateTo({
						url:`${e}?id=${id}`
					})
					return;
				};
				// 跳转其他网页
				if(e.includes('http')||e.includes('https')){
					window.location.href=e;
					return;
				};
				// 跳转景区导览地图
				if(e.includes('hybrid')){
					uni.navigateTo({
						url:`/usercenter_subpages/html/html?url=${e}`
					})
					return;
				};
			},
			// 关闭弹框
			cancelPopup(){
				this.$refs.popup.hide();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.contain{
		background-color: #f8f8f8;
		min-height: 100vh;
		.pageBtn{
			position: fixed;
			bottom: calc(58rpx + var(--window-bottom));
			right: 25rpx;
			z-index: 999;
			width: 110rpx;
			image{
				width: 110rpx;
				height: 110rpx;
				border-radius: 100rpx;
				box-shadow: 0px 0px 10rpx #888888;
			}
		}
		.showBtn{
			position: fixed;
			bottom: calc(58rpx + var(--window-bottom));
			right: 25rpx;
			z-index: 999;
		
			display: flex;
			justify-content: flex-end;
			background-color: snow;
			border-radius: 100rpx;
			// transition-property: width, height;
			// transition-duration: .8s;
			transition: width .5s; 
		}
		
		.showBtn1{
			
			width: 200rpx;

		}
		.newBtn1{
			transform: rotate(45deg);
		}
		.newBtn{
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			background-color:#eb8a3e ;
			transition: transform .3s;
			.newLine1{
				width: 8rpx;
				height: 60%;
				background-color: snow;
				position: relative;
				left: 46rpx;
				top: 20%;
			}
			.newLine2{
				width: 60%;
				height:8rpx;
				background-color: snow;
				position: absolute;
				left: 20%;
				top: 46rpx;
			}
		}
		.carousel-section{
			 .search {
				display: flex;
				width: 90%;
				height: 90rpx;
				margin-left: 5%;
				padding-top: 30rpx;
				overflow: hidden;
				border-radius: 8rpx;
				color: grey;
				position: absolute;
				z-index: 9;
				
				.searchLeft {
					width: 80%;
					background: #FFFFFF;
					opacity: 0.5;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					font-size: 26rpx;
					img {
						margin-left: 5%;
						width: 50rpx;
					}
				}
			 
				.searchRight {
					font-size: 24rpx;
					background: #FFFFFF;
					opacity: 0.5;
					width: 15%;
					margin-left: 5%;
					color: #373737;
					border-radius: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			 }
		}
		.carousel {
			width: 100%;
			height: 600rpx;
			background-color: #FFFFFF;
		
			.carousel-item {
				width: 100%;
				height: 100%;
				overflow: hidden;
				background: #c9c9c9;
			}
		
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		.line{
			width: 100%;
			height: 6rpx;
			background-color: #e9e9e9;
		}
		.nav{
			width: 90%;
			margin-left: 5%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			overflow-x: auto;
			// width:750rpx;
			.navBgIcon{
				position: absolute;
				width: 40rpx;
				right: -20rpx;
				top:-5rpx;
			}
             .navName{
			   		color: gray;
			   		font-size: 25rpx;
					position: relative;
					white-space: nowrap;
					margin-right:30rpx;
			   }
			   .activeNav{
				   color: #111;
			   }
		}
		.evaContent{
			padding: 3%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			.evaItem{
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				width: 48%;
				background-color: snow;
				border-radius: 20rpx;
				box-shadow:0px 5px 5px #d6d6d6 ;
				
				.showImg{
					width: 100%;
					height: 330rpx;
					border-radius: 22rpx 22rpx 0 0;
				}
				
				.evaTitle{
					font-size: 24rpx;
					color: #111111;
					font-weight: bold;
					padding: 3%;
				}
				
				.evaUserInfo{
					padding: 3%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.infoLeft{
						display: flex;
						align-items: center;
						font-size: 22rpx;
						image{
							width: 40rpx;
							height: 40rpx;
							border-radius: 40rpx;
							margin-right: 10rpx;
						}
						.texthide{
							width:120rpx;
						}
					}					
					.infoRight{
						display: flex;
						font-size: 22rpx;
						align-items: center;
						width:100rpx;
						>view{
							padding-right: 10rpx;
							display: flex;
							align-items: center;
							line-height: 22rpx;
						}
						
						image{
							width: 25rpx;
							height: 25rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}
	.weatherMsg{
		width: 100%;
		text-align: center;
		padding: 60rpx 40rpx;
		
		.dateBox{
			font-size: 50rpx;
			font-weight: 600;
		}
		
		.line{
			width: 100rpx;
			margin: 20rpx auto;
			border-bottom: 1rpx solid rgba($color: #333, $alpha: .3);
		}
		
		.weatherBox{
			font-size: 36rpx;
		}
	}
	
	.serviceMenu{
		width: 100%;
		padding-bottom: 100rpx;
		
		.serviceItem{
			width: 100%;
			margin-bottom: 40rpx;
			
			.serviceTitle{
				font-size: 38rpx;
				font-weight: 600;
				padding: 0 40rpx;
				margin-bottom: 20rpx;
			}
			
			.seviceContain{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				padding: 0 15rpx;
				
				.serviceIcon{
					text-align: center;
					width: 180rpx;
					height: 200rpx;
					
					.serviceImg{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
						margin: 20rpx auto 20rpx;
						image{
							width: 100rpx;
							height: 100rpx;
						}
					}
					text{
						font-size: 26rpx;
						font-weight: 600;
						color: #666;
					}
				}
			}
		}
	}
	.miniProgramMsg{
		.topTitle{
			height: 700rpx;
			border-bottom: 1rpx solid #f5f5f5;
			padding: 40rpx;
			text-align: center;
			
			.miniTitle{
				font-size: 38rpx;
				margin: 20rpx 0;
			}
			
			.miniMsg{
				color: #999;
				font-size: 30rpx;
			}
			
			.miniImg{
				margin: 40rpx auto;
				width: 300rpx;
				height: 300rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			
			.miniNotic{
				color: #999;
			}
		}
		
		.bottomTitle{
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			color: #F56C6C;
			font-size: 38rpx;
		}
	}
	.texthide{
		width:180rpx; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	}
</style>